<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=request.getContextPath()%>/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医疗预约系统后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="statics/css/hisStyle.css">
    <style>
        /* 按钮样式优化 */
        .edit-btn {
            background-color: var(--success);
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .edit-btn:hover {
            background-color: #27ae60;
            transform: translateY(-1px);
        }
        
        .delete-btn {
            background-color: var(--danger);
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .delete-btn:hover {
            background-color: #c0392b;
            transform: translateY(-1px);
        }
        
        .operation-btn {
            margin: 0 5px;
        }
        
        /* 优化卡片和布局 */
        .content h1 {
            font-size: 28px;
            margin-bottom: 30px;
            color: var(--secondary);
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
        }
        
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
            margin-bottom: 35px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        }
        
        /* 优化表格 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .data-table th {
            background: var(--secondary);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 14px;
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        /* 快捷操作样式优化 */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            padding: 25px 0;
        }
        
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
            background-color: white;
            border-radius: 10px;
            color: var(--secondary);
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid var(--light);
            box-shadow: var(--shadow);
        }
        
        .action-btn:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            border-color: var(--primary);
        }
        
        .action-btn i {
            font-size: 2.5em;
            margin-bottom: 15px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .dashboard-cards {
                grid-template-columns: 1fr;
            }
            
            .quick-actions {
                grid-template-columns: 1fr;
            }
            
            .data-table {
                font-size: 14px;
            }
            
            .data-table th, .data-table td {
                padding: 8px 10px;
            }
        }
    </style>
</head>
<body>
<!-- 侧边栏 -->
<%@include file="common/sidebar.jsp"%>

<!-- 主内容区域 -->
<div class="main-content">
    <!-- 顶部导航 -->
    <%@include file="common/top.jsp"%>

    <!-- 内容区域 -->
    <div class="content">
        <h1>控制面板</h1>

        <!-- 统计卡片 -->
            <div class="dashboard-cards">
                <div class="stat-card">
                    <div class="stat-icon bg-primary">
                        <i class="fas fa-building fa-lg"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${requestScope.hospitalCount}</h3>
                        <p>医院总数</p>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon bg-success">
                        <i class="fas fa-clinic-medical fa-lg"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${requestScope.total}</h3>
                        <p>科室总数</p>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon bg-warning">
                        <i class="fas fa-user-md fa-lg"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${requestScope.doctorCount}</h3>
                        <p>医生总数</p>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon bg-danger">
                        <i class="fas fa-calendar-check fa-lg"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${requestScope.todayAppointmentCount}</h3>
                        <p>今日预约数</p>
                    </div>
                </div>
            </div>

        <!-- 最新科室 -->
        <div class="card" style="margin-bottom: 30px;">
            <h2 class="section-title">最新科室</h2>

            <table class="data-table">
                <thead>
                <tr>
                    <th style="width: 20%;">科室名</th>
                    <th style="width: 40%;">设备配置</th>
                    <th style="width: 25%;">所属医院</th>
                    <th style="width: 15%;">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${departmentList}" var="dept">
                    <tr>
                        <td>${dept.deptName}</td>
                        <td>${dept.equipment}</td>
                        <td>${dept.hospital.hospitalName}</td>
                        <td>
                            <a href="department/findById?deptId=${dept.deptId}"
                               class="operation-btn edit-btn">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            <a href="department/removeById?deptId=${dept.deptId}"
                               class="operation-btn delete-btn"
                               onclick="return confirm('确定要删除该科室吗？')">
                                <i class="fas fa-trash"></i> 删除
                            </a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        
        <!-- 快捷操作区域 -->
        <div class="card">
            <h2 class="section-title">快捷操作</h2>
            <div class="quick-actions">
                <a href="hospital/toAdd" class="action-btn">
                    <i class="fas fa-plus-circle"></i>
                    <span>新增医院</span>
                </a>
                <a href="department/toAdd" class="action-btn">
                    <i class="fas fa-plus-circle"></i>
                    <span>新增科室</span>
                </a>
                <a href="doctor/toAdd" class="action-btn">
                    <i class="fas fa-plus-circle"></i>
                    <span>新增医生</span>
                </a>
                <a href="appointment/find" class="action-btn">
                    <i class="fas fa-calendar-alt"></i>
                    <span>查看预约</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function findById(deptId) {
        window.location.href = "department/findById?deptId=" + deptId; // 对应DepartmentController的findById
    }

    function removeById(deptId) {
        if(confirm("确定要删除该科室吗？")) {
            window.location.href = "department/removeById?deptId=" + deptId; // 对应DepartmentController的removeById
        }
    }
</script>
</body>
</html>